<template>
	<view class="layout">
		<post-nav-bar title="生成结果"></post-nav-bar>
		<view class="ai-view">
			<view class="name">{{aiData.name}}</view>
			<view class="material">
				<view class="material-item" v-for="(item, index) in aiData.material" :key="index">
					{{item}}
				</view>
			</view>
			<view class="content">
				<view class="body-item" v-for="(item, index) in aiData.body" :key="index">
					{{item}}
				</view>
				
			</view>
		</view>
		<view class="search-list">
			<Line></Line>
			<view class="result" v-for="(item, index) in searchList" :key="index" @click="goPost(item.dishId)">
				<view class="result-content">
					<image :src="getImage(item.imageUrl)" mode="aspectFill" class="result-image"></image>
					<view class="result-count-info">
						<view class="result-counts">
							<uni-icons type="hand-up" color="#ffffff" size="18"></uni-icons>
							<text>{{ item.likes }}</text>
						</view>
						<view class="result-counts">
							<uni-icons type="star" color="#ffffff" size="18"></uni-icons>
							<text>{{ item.favorites }}</text>
						</view>
					</view>
					<view class="result-info">
						<view class="title">{{ item.name }}</view>
						<view class="user">
							<uni-icons type="person" color="#888" size="18"></uni-icons>
							<text>{{ item.username }}</text>
						</view>
						<view class="views">
							<uni-icons type="eye" color="#888" size="19"></uni-icons>
							<text>{{ item.views }}</text>
						</view>
					</view>
				</view>
				<Line></Line>
			</view>
		</view>
	</view>
</template>

<script setup>
import Line from '@/components/Line.vue'
import {
	ref,
	createApp,
	onMounted
} from 'vue';
import {
	Tab,
	Tabs,
	Lazyload,
	Button,
	Loading,
	PullRefresh,
	BackTop
} from 'vant';
import { appUrl } from '../../main';
const aiData = {
	name:"生煎包",
	material:[
		"面皮 ",
        "中筋面粉 250g",
        "温水 130g",
        "白砂糖(可减量) 12g",
        "猪油/植物油 5g",
        "盐 1g",
        "耐高糖干酵母 5g",
        "无铝泡打粉(可不放) 1g",
        "馅料 ",
        "肉糜(肥瘦比3:7) 150g",
        "蛋清 1个",
        "老抽 5g",
        "生抽 5g",
        "蚝油 10g",
        "料酒 10g",
        "白糖 5g",
        "盐 2g",
        "芝麻油 1勺",
        "葱花 少许",
        "白芝麻 少许",
        "葱姜水 20g",
        "装饰 ",
        "黑芝麻 少许",
        "葱花 少许"		
	],
	body: [
	    "1   依次称量除温水以外的全部材料，搅拌均匀。（现在是冬天，天冷发面醒面都比较慢，酵母可以提前用配方里的130g 35度左右的温水融解化开静置一会儿，提前激发酵母的活性，加速发面。)",
	    "2   慢慢分次倒入水，搅拌成絮状。",
	    "3   揉成光滑的面团。尽量多揉一会儿揉到面团很软很光滑，揉的面团越光滑做出来的生煎包也越光滑，口感更松软细腻。",
	    "4   盖上保鲜膜，开始发酵。方法不限，烤箱有发酵功能但我通常在烤箱内放一盆温水发酵很快又省电(/ω＼)",
	    "5   发酵的时候制作肉馅，我用的肥瘦比3:7的黑猪肉馅，依次加入所有调料拌匀均匀。顺时针方向不停搅拌，搅打上劲，注意料酒、葱姜水分次慢慢加入。(喜欢吃带汤汁的，可以事先准备好80g左右肉皮冻，切成丁拌入肉馅中即可。)",
	    "6   肉馅搅打成这个状态就可以了。",
	    "7   发酵至2~2.5倍大，手指蘸面粉戳一下不回弹就是发酵好了。",
	    "8   这个状态就是发酵好了。",
	    "9   再揉10分钟醒10分钟，分20个剂子刚好20g一个，全部搓圆备用，盖上保鲜膜防止风干。(不建议把生煎包做的特别大，会塌而且不饱满，20g一个面剂子大小比较合适。)",
	    "10   取一个大的不粘锅倒入油铺满整个锅子即可。用擀面杖擀成中间厚四周薄的圆形面皮，尽量擀大点，不然不好包。不要求包的好看，只要收口捏紧不要露馅就可以！",
	    "11   平底锅中倒入一些油(油不能太少，至少要铺满整个锅底的油)，生煎包倒扣依次摆放在锅内，包的好看的可以正着摆放，摆放的有点间隙，不要太紧，不然会变成挤挤包的！",
	    "12   全部包好摆好，刚好整整一锅。",
	    "13   每个都刷上植物油。(一定要刷油，不然生煎馒头会粘一起)",
	    "14   撒上黑芝麻(少许，不要撒太多黑芝麻)盖上盖子在温暖的地方醒发15~30分钟，醒发至1.5倍大。(时间只是参考，主要看发酵程度。不要发酵过度，包子出炉会塌)",
	    "15   明显又胖了一圈，可以开始煎生煎包了！",
	    "16   中火煎2~3分钟，100ml水加一小勺面粉融化后倒入锅中，盖上锅盖小火焖7分钟，待水收干，撒葱花(葱花擦干水分)小火焖2分钟即可出锅！关火后不要马上打开，盖子焖2~3分钟再打开！！！",
	    "17   煎制过程中可以拿一个生煎馒头观察一下脆底是否金黄，小心煎焦！觉得脆底金黄即可出锅。   脆底真的是生煎包的灵魂！！！",
	    "18   香气扑鼻的生煎馒头出锅！",
	    "19   全发酵脆底生煎馒头完成✅",
	    "20   对生煎包的爱真是欲罢不能(/ω＼)"
	],
}


const getImage = (path) => {
	return "https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/food_moment_discover/train/data/" + path
}

let searchList = ref([]);

const getSearchList = async (content) => {
	try {
		uni.request({
			url: appUrl+'/dish/search',
			data: {
				content: content
			},
			method: "POST"
		}).then((res) => {
			if (res.data.status == 200) {
				searchList.value = res.data.data
			} else {
				console.log('服务异常');
			}
		})
	} catch (error) {
		console.error('请求失败:', error);
	}
}

const goPost = (id) => {
	uni.setStorageSync('dishId', id)
	uni.navigateTo({
		url:"/pages/PostView/PostView"
	})
}

onMounted(() => {
	getSearchList("生煎包")
	// uni.getStorage({
	// 	key: 'storage_search',
	// 	success: function(res) {
	// 		console.log(res.data);
	// 		getSearchList(res.data);
	// 	}
	// });
})
</script>

<style lang="scss" scoped>
.layout{
	.ai-view{
		padding: 30rpx;
		.name{
			display: flex;
			justify-content: center;
			font-size: 30px;
			font-weight: bold;
		}
		.material{
			margin: 50rpx 0;
		}
	}
	.result {
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
	
		.result-content {
			display: flex;
			align-items: center;
			padding: 20rpx;
			gap: 20rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
	
			.result-count-info {
				position: absolute;
				bottom: 20rpx;
				right: 400rpx;
				display: flex;
				align-items: center;
				padding: 10rpx;
				background-color: rgba(0, 0, 0, 0);
				color: white;
				font-size: 13px;
				gap: 25rpx;
	
				.result-counts {
					display: flex;
					gap: 4rpx;
					align-items: center;
				}
			}
		}
	}
	
	
	.result-image {
		width: 100%;
		height: 250rpx;
		max-width: 380rpx;
		min-width: 380rpx;
		border-radius: 10rpx;
	}
	
	.result-info {
		.title {
			font-size: 16px;
			color: #333;
			height: 100rpx;
		}
	
		.user {
			display: flex;
			font-size: 14px;
			color: #999;
			gap: 10rpx;
			align-items: center;
		}
	
		.views {
			display: flex;
			font-size: 15px;
			color: #999;
			gap: 10rpx;
			align-items: center;
			padding-top: 10rpx;
		}
	}
}
</style>
